<template>
	<view class="msj_content">
		<view class="msj_myuserinfo_top">
				<u-button @click='tuichu' size='mini' style="width: 80px; position: absolute; top: 5px; right: 5px;" type="primary">退出登录</u-button>
			<view class="msj_myuserinfo_c">
				<view class="msj_myuserinfo_info">
					<!-- 头像 -->
					<view class="msj_myuserinfo_author">
						<image :src="userinfo.author" mode=""></image>
					</view>
					<view class="msj_myuserinfo_username">
						{{userinfo.username}}
					</view>
					<view class="msj_myuserinfo_jianjie">
						{{userinfo.jinajie}}
					</view>
					<view class="msj_myuserinfo_gz">
						<view v-for="(item,index) in myuserinfo_gz" :key="index" @click="topath(item)" class="msj_myuserinfo_item">
							<u-icon :name="item.icon" color="#333" size="30"></u-icon>
							<text>{{item.name}} {{item.num}}</text>
							<view v-show="index==0" style="height: 50%; border: 0.5px solid #ddd; margin: 0 20px;"
								class="">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="msj_my_tabs">
			<view  class="msj_my_tabs_list">
				<view v-for="(item,index) in list" :key="index" class="msj_my_tabs_item">
					<text @click="change(index)" :class="current==index?'msj_my_tabs_active':''">{{item.name}}</text> 
				</view>
			</view>
			<scroll-view scroll-y="true" class="msj_scroll-y">
				<view class="msj_list_c" v-if="tabsdata.length>0">
					<view v-for="(item,index) in tabsdata" :style="{'marginRight':index%2==0?'15px':''}" :key="index" class="msj_list_c_item">
						<image v-if="item.img" :src="item.img"class='msj_list_imgs' mode=""></image>
						<view v-else class="msj_list_imgs_none">
							<u-icon name="photo-fill" color="#999" size="28"></u-icon>
						</view>
						<view class="msj_tabsdata_bottom">
							<view style="width: 100%; padding: 5px; box-sizing: border-box; font-size: 17px; font-weight: 700; " class="msj_tabsdata_over">
								{{item.name}}
							</view>
							<view v-if="current==1" style="justify-content: flex-start; font-size: 13px; color: #666;" class="msj_tabsdata_user">
								{{item.times}}
							</view>
							<view v-else class="msj_tabsdata_user">
								<view style="display: flex; font-size: 13px; align-items: center; color: #666;" class="">
									<image style="width: 25px; height: 25px; border-radius: 50%; margin-right: 5px;" :src="item.author" mode=""></image>
									<text >{{item.username}}</text>
								</view>
								<view style="display: flex; font-size: 13px; align-items: center; color: #666;" class="">
									<u-icon name="eye" color="#666" size="16"></u-icon>
									<text style="margin-left: 5px;">{{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view v-else style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
					{{texts}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {getmsjusermy} from '../../../utils/api.js'
	export default {
		data() {
			return {
				userinfo: {},
				texts:'您还未收藏作品~',
				tabsdata:[],
				list: [
				{
					name: '收藏',
					lists:[
					]
				}, {
					name: '作品',
					lists:[
					]
				}, {
					name: '点赞',
					lists:[
					]
				}],
				current: 0,
				myuserinfo_gz: [{
						name: '关注',
						num: 0,
						icon: 'man-add',
						path:'/pages/tabbar/tabbar-5/msj-guanzhu/msj-guanzhu'
					},
					{
						name: '粉丝',
						num: 0,
						icon: 'man-add-fill',
						path:'/pages/tabbar/tabbar-5/msj-fensi/msj-fensi'
					}
				]
			}
		},
		onShow() {
			this.getuser()
		},
		onLoad() {
			this.getuser()
		},
		methods: {
			change(index) {
				this.current = index;
				this.tabsdata=this.list[this.current].lists
				if(this.tabsdata.length==0){
					this.texts=index==0?'您还未收藏作品~':(index==1?'您还未发布过食圈~':'您还未点赞过~')
				}
			},
			getuser(){
				let token = JSON.parse(uni.getStorageSync('token'))
				getmsjusermy(token.userid).then(res => {
					let data = res.data
					data.fensi = JSON.parse(data.fensi)
					data.guanzhu = JSON.parse(data.guanzhu)
					data.shouc = JSON.parse(data.shouc)
					data.zuopin = JSON.parse(data.zuopin)
					data.dianz = JSON.parse(data.dianz)
					this.userinfo = data
					this.myuserinfo_gz[0].num = this.userinfo.guanzhu.length
					this.myuserinfo_gz[1].num = this.userinfo.fensi.length
				
					this.list=this.list.map((v,i)=>{
						if(i==0){
							v.lists=data.shouc
						}else if(i==1){
							v.lists=data.zuopin.length>0?(data.zuopin.map(v=>{
								return {
								name:v.title,
								img:JSON.parse(v.image)[0],
								times:v.time
								}
							})):[]
						}else if(i==2){
							v.lists=data.dianz.map(v=>{
								v.img=JSON.parse(v.img)[0]
								return v
							})
						}
						return v
					})
					this.tabsdata=this.list[this.current].lists
				})
				
			},
			topath(v){
				uni.navigateTo({
					url:v.path
				})
			},
			// 退出
			tuichu(){
				uni.showModal({
					content: '确定退出?',
					cancelText:'取消',
					confirmText:'确定',
					success: (res)=> {
						if (res.confirm) {
							uni.removeStorageSync('token');
							uni.switchTab({
							    url: '/pages/tabbar/tabbar-1/tabbar-1' 
							});
							setTimeout(()=>{
								this.$router.go(0)
							},0)
							
						} else if (res.cancel) {
							
						}
					}
				});				
			}
		}
	}
</script>

<style>
	.msj_myuserinfo_top,
	.msj_content {
		width: 100%;
	}

	.msj_myuserinfo_top {
		background: #FED652;
		height: 200px;
		position: relative;
		border-bottom-left-radius: 10%;
		border-bottom-right-radius: 10%;
		margin: 0 0 40px;
	}

	.msj_myuserinfo_c {
		position: absolute;
		bottom: -80px;
		width: 100%;
		left: 0;

		display: flex;
		justify-content: center;
	}

	.msj_myuserinfo_info {
		width: 85%;
		background: #fff;
		padding: 50px 0 10px;
		border-radius: 15px;
		box-shadow: 2px 2px 20px 2px #ddd;
	}

	.msj_myuserinfo_jianjie,
	.msj_myuserinfo_username {
		width: 100%;
		text-align: center;
		font-size: 20px;
		padding: 0 0 5px;
		font-weight: 700;
	}

	.msj_myuserinfo_jianjie {
		font-size: 15px;
		font-weight: 500;
		color: #999;
	}

	.msj_myuserinfo_gz {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.msj_myuserinfo_item {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 14px;
		padding: 10px 0;
	}

	.msj_myuserinfo_item text {
		margin-left: 5px;
	}

	.msj_myuserinfo_author {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		top: -40px;
		left: 0;
	}

	.msj_myuserinfo_author image {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.msj_my_tabs {
		width: 100%;
		padding: 40px 0 0;
	
	}
	.msj_my_tabs_list{
		width: 100%;
		display: flex; padding: 20px 0 6px;
		justify-content: center;
	}
	.msj_my_tabs_item{
		font-size: 15px;
		color: #333; 
		padding: 0 20px;
	}
	.msj_my_tabs_item text{
		padding: 0 0 2px;
	}
	.msj_my_tabs_active{
		font-size: 17px;
		font-weight: 600;
		border-bottom: 3px solid #FED652;
	}
	
	.msj_scroll-y{
		width: 100%;
		height: calc(100vh - 382px);
	}
	
	.msj_list_c{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 10px 10px 0;
		box-sizing: border-box;
	}
	
	.msj_list_c_item{
		width: 48%;
		background: #fff;
		box-shadow: 2px 2px 20px 2px #ddd;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 10px;
		margin-bottom: 10px;
	}
	
	.msj_list_imgs_none,.msj_list_imgs{
		width: 100%;
		height: 160px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.msj_list_imgs_none{
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ccc;
	}
	.msj_tabsdata_user,.msj_tabsdata_bottom{
		width: 100%;
	}
	.msj_tabsdata_user{
		display: flex; align-items: center;
		justify-content: space-between;
	}
	
	.msj_tabsdata_over{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>